<link rel="stylesheet" href="./modules/overView/overView.css">
<script src="./modules/overView/overView.echarts.js"></script>

<div id="main-container">

    <!--    顶部    -->
    <div class="sub-container" id="overView-header-container">
        <div class="trapezoid-header" id="overView-title-container"></div>
        <h1 class="inline-title left-align font-weight-normal">网络日志分析系统</h1>
    </div>

    <div class="sub-container" id="menu-container">
        <h2 class="inline-title"></h2>
        <a href="#" onclick="enter()">enter</a>
    </div>

    <!--    中间地图    -->
    <div class="sub-container" id="timeChart"></div>
    <div class="sub-container" id="attackSourceChart"></div>
    <div id="attackSourceTitle">攻击来源分析</div>
    <!--    左侧Web数据和分析结果  -->

    <!--    web实时流量图     -->
    <div class="sub-container" id="webStreamContainer">
        <div class="trapezoid-sub-title-container">
            <div class="trapezoid-sub-title"></div>
            <h2 class="inline-title align-left">Web实时流量</h2>
            <div class="float-right">
                <h3 class="inline-title" id="webStreamSubTitle"></h3>
            </div>
        </div>
        <div class="card-body" id="webStreamChart"></div>
    </div>

    <!--    攻击种类和比例图     -->
    <div class="sub-container" id="attackTypeContainer">
        <div class="trapezoid-sub-title-container">
            <div class="trapezoid-sub-title"></div>
            <h2 class="inline-title align-left">攻击事件概况</h2>
            <div class="float-right">
                <h3 class="inline-title" id="attackTypeSubTitle"></h3>
            </div>
        </div>
        <div class="card-body" id="attackTypeChart">
        </div>
    </div>

    <!--    攻击事件表格     -->
    <div class="sub-container" id="attackEventsContainer">
        <div class="trapezoid-sub-title-container">
            <div class="trapezoid-sub-title"></div>
            <h2 class="inline-title align-left">最新攻击事件</h2>
            <div class="float-right">
                <h3 class="inline-title"></h3>
            </div>
        </div>
        <div class="divider"></div>
        <table id="attackEventsTable" class="display" style="width:100%"></table>
    </div>

    <!--    右侧防火墙   -->

    <!--    防火墙实时流量图     -->
    <div class="sub-container" id="firewallStreamContainer">
        <div class="trapezoid-sub-title-container">
            <div class="trapezoid-sub-title"></div>
            <h2 class="inline-title align-left">防火墙实时访问量</h2>
            <div class="float-right">
                <h3 class="inline-title" id="firewallStreamSubTitle"></h3>
            </div>
        </div>
        <div class="card-body" id="firewallStreamChart">
        </div>
    </div>


    <!--    异常行为概览柱状图    -->

    <div class="sub-container" id="abnormalTypeContainer">
        <div class="trapezoid-sub-title-container">
            <div class="trapezoid-sub-title"></div>
            <h2 class="inline-title align-left">异常行为概况</h2>
            <div class="float-right">
                <h3 class="inline-title" id="abnormalTypeSubTitle"></h3>
            </div>
        </div>
        <div class="card-body" id="abnormalTypeChart">
        </div>
    </div>

    <!--    异常行为事件告警表格    -->
    <div class="sub-container" id="abnormalEventsContainer">
        <div class="trapezoid-sub-title-container">
            <div class="trapezoid-sub-title"></div>
            <h2 class="inline-title align-left">最新异常事件</h2>
            <div class="float-right">
                <h3 class="inline-title"></h3>
            </div>
        </div>
        <div class="divider"></div>
        <table id="abnormalEventsTable" class="display" style="width:100%"></table>
    </div>


</div>

<script src="./modules/overView/overView.js"></script>
<script src="./modules/overView/overView.index.js"></script>